<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
		a, 
		span{
			margin-right: 10px;
		}
	</style>
</head>
<body>

    <div class="page-btn-wrap" id="pageBtnCover">
    	
    </div>
	<script type="text/javascript">

    var oPageBtnCover = document.getElementById('pageBtnCover'),
        pageNum = 20,
        curPage = 1;

    setPageBtns(pageNum, curPage);

    oPageBtnCover.onclick = function(e){
    	var e = e || window.event,
    	    tar = e.target || e.srcElement,
    	    className = tar.className;
      
      switch(className){
      	case 'page-btn':
      	  curPage = parseInt(tar.getAttribute('data-page'));
          setPageBtns(pageNum, curPage);
          break;
        case 'prev-btn':
        	curPage -= 1;
    		  setPageBtns(pageNum, curPage);
          break;
        case 'next-btn':
          curPage += 1;
    		  setPageBtns(pageNum, curPage);
    		  break;
      }

    }

    function setPageBtns(pageNum, curPage){
    	var pageBtnTpl = function(type, num, curPage){
	    	switch(type){
	    		case 'btn':
	    		  if(curPage == num){
	            return '<span class="page-btn page-btn-cur">'+ num +'</span>';
	    		  }else{
	            return '<a href="javascript:;" class="page-btn" data-page="'+ num +'">'+ num +'</a>';
	    		  }
	    		  break;
	    		case 'prev':
	    		  if(curPage == 1){
	            return '<span class="dir-btn prev-btn disabled">&lt;</span>';
	    		  }else{
	            return '<a href="javascript:;" class="dir-btn prev-btn">&lt;</a>';
	    		  }
	    		  break;
	    		case  'next':
	    		  if(curPage == pageNum){
	            return '<span class="dir-btn next-btn disabled">&gt;</span>';
	    		  }else{
	            return '<a href="javascript:;" class="dir-btn next-btn">&gt;</a>';
	    		  }
	    		  break;
	    		case 'points':
	    		  return '<span class="points">...</span>';
	    		  break;
	    	}
	    }

	    var btnGroup = '';

	    function makeBtnGroup(start, end, curPage){
        for(var i = start; i <= end; i++){
        	btnGroup += pageBtnTpl('btn', i, curPage);
        }
	    }
      
      btnGroup += pageBtnTpl('prev', pageNum, curPage);
      if(pageNum > 7){
      	if(curPage < 3){
		    	makeBtnGroup(1, 3, curPage);
		    	btnGroup += pageBtnTpl('points');
		    	makeBtnGroup(pageNum - 1, pageNum, curPage);
		    }else if(curPage >= 3 && curPage < 5){
          makeBtnGroup(1, curPage + 1, curPage);
		    	btnGroup += pageBtnTpl('points');
		    	makeBtnGroup(pageNum - 1, pageNum, curPage);
		    }else if(curPage >= 5 && curPage < pageNum - 3){
		    	makeBtnGroup(1, 2, curPage);
		    	btnGroup += pageBtnTpl('points');
		    	makeBtnGroup(curPage - 1, curPage + 1, curPage);
		    	btnGroup += pageBtnTpl('points');
		    	makeBtnGroup(pageNum - 1, pageNum, curPage);
		    }else if(curPage >= pageNum - 4 && curPage <= pageNum - 1){
		    	makeBtnGroup(1, 2, curPage);
		    	btnGroup += pageBtnTpl('points');
		      makeBtnGroup(curPage - 1, pageNum, curPage);
		    }else if(curPage == pageNum){
		    	makeBtnGroup(1, 2, curPage);
		    	btnGroup += pageBtnTpl('points');
		      makeBtnGroup(curPage - 2, pageNum, curPage);
		    }
      }else{
      	makeBtnGroup(1, pageNum, curPage);
      }
      btnGroup += pageBtnTpl('next', pageNum, curPage);
	    
	    oPageBtnCover.innerHTML = btnGroup;
    }
	</script>
</body>
</html>



















